<script setup>
import {ref,reactive,computed} from 'vue'
let classname1=ref('box1')
let classname2=ref('box2')
let isActive=ref(true)
let boxobj=reactive({box1:true,box2:true})
let boxcomp=computed(()=>{
    return {box1:isActive.value}
})
function qf(){
    isActive.value=!isActive.value
}
let one=ref("red")
let color=ref("background-color")
</script>
<template>
<h1>样式绑定-class属性绑定</h1>
<div class="box1">类选择器样式绑定</div>
<br>
<div v-bind:class="classname1">通过属性绑定样式 v-bind:动态属性绑定指令<br> 以字符串的形式绑定，注意：绑定的值是样式名称对应的变量等价于<br>class="box1"</div>
<p>
    class属性绑定有三种形式<br>
    1.绑定字符串<br>
    2.绑定为对象<br>
</p>
<div v-bind:class="{box1:isActive}">2.绑定对象的设置方法注意：对象中的属性为样式名称，属性值是布尔，为真为有效，为假当前的样式移除</div>
<button @click="qf()"> 取反</button>
<div class="box2" v-bind:class="{box1:isActive}">

        初始样式
        class属性动态绑定的方式和class样式设置可以共存，都有效，等价于class="box1,box2"
</div>

<p>isActive:{{isActive}}</p>
<div v-bind:class="boxobj">通过对象变量绑定</div><br>
<div :class="boxcomp">通过计算属性绑定</div>
<div :class="[classname1,classname2]">
    3.通过数组绑定,注意：数组的值是样式名称对应的变量
</div>
<div :class="[isActive?classname1:classname2]">单条件样式设置，数组形式</div><br>
<div :class="[{box1:isActive},classname2]">在数组中可以设置对象形式,注意：对象中的属性一定是样式名称，不能是样式名称对应的变量，属性是是布尔</div>
<div :style={color:one}>sdjaidj</div>
</template>
<style scoped>
.box1{
    width:300px;
    background-color:red;
}
.box2{
    font-size: 30px;
}
</style>
